<template>
  <div>
    <div>
      <router-link class="blogin" to="/login">返回登录</router-link>
      <div class="login-logo">
        <img src="../assets/header-logo.png" alt="" />
      </div>
    </div>
    <div class="forms">
      <van-field
        required
        label="手机号"
        placeholder="请输入手机号"
        v-model="uphone"
        :error-message="uphoneMsg"
        @blur.native.capture="checkPhone"
      ></van-field>

      <van-field
        required
        label="密码"
        placeholder="请输入密码"
        type="password"
        v-model="upwd"
        :error-message="upwdMsg"
        @blur.native.capture="checkPwd"
      ></van-field>

      <van-field
        required
        label="确认密码"
        placeholder="请再次输入密码"
        type="password"
        v-model="upwd2"
        :error-message="upwd2Msg"
        @blur.native.capture="checkPwd2"
      ></van-field>

      <van-field
        v-model="uname"
        required
        label="昵称"
        placeholder="请输入昵称"
        :error-message="unameMsg"
        @blur.native.capture="checkName"
      />

      <van-field
        required
        label="邮箱"
        placeholder="请输入邮箱"
        v-model="uemail"
        :error-message="uemailMsg"
        @blur.native.capture="checkemail"
      ></van-field>

      <van-field
        v-model="umsg"
        class="msg"
        center
        clearable
        label="验证码"
        placeholder="请输入验证码"
        use-button-slot
      >
        <van-button slot="button" size="small" type="primary" @click="content">
          发送验证码
        </van-button>
      </van-field>

      <van-button type="primary" @click.native.capture="checkForm"
        >立即注册</van-button
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uname: "",
      upwd: "",
      upwd2: "",
      uphone: "",
      unameMsg: "",
      upwdMsg: "",
      upwd2Msg: "",
      uphoneMsg: "",
      uemail: "",
      uemailMsg: "",
      umsg: "",
    };
  },
  methods: {
    checkName() {
      let exp = /^.{2,15}$/;
      if (this.uname == "" || exp.test(this.uname)) {
        this.unameMsg = "";
      } else {
        this.unameMsg = "昵称长度为2-15";
      }
    },
    checkPhone() {
      let exp = /^1[3-9]\d{9}$/;
      if (this.uphone == "" || exp.test(this.uphone)) {
        this.uphoneMsg = "";
      } else {
        this.uphoneMsg = "手机号格式错误。";
      }
    },
    checkPwd() {
      let exp = /^[a-zA-Z]\w{5,17}$/;
      if (this.upwd == "" || exp.test(this.upwd)) {
        this.upwdMsg = "";
      } else {
        this.upwdMsg = "请以字母开头,长度6~18之间,只能包含字母、数字和下划线";
      }
    },
    checkPwd2() {
      let exp = /^[a-zA-Z]\w{5,17}$/;
      if (exp.test(this.upwd2) && this.upwd == this.upwd2) {
        this.upwd2Msg = "";
      } else {
        this.upwd2Msg = "两次密码不一致";
      }
    },
    content() {
      var url = `sys/userDo/getEmailCode?email=${this.uemail}`;
      this.axios.get(url).then((res) => {
        console.log(url);
        console.log(res);
        this.data = res.data;
      });
    },

    //     // let params = `username=${this.uname}&password=${this.upwd}`;
    //     // this.axios.post("/register", params).then(res => {
    //     //   console.log("注册业务", res);
    //     // if (res.data.code == 200) {
    //     //   this.$store.commit("updateUserInfo", this.uname);
    //     //   this.$router.push("/login");
    //     // } else if (res.data.code == 201) {
    //     //   //用于已存在
    //     //   this.$messagebox("提示", "用户已存在，请重试");
    //     // }
    //     // });
    checkemail() {
      let exp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
      if (this.uemail == "" || exp.test(this.uemail)) {
        this.uemailMsg = "";
      } else {
        this.uemailMsg = "邮箱格式有误";
      }
    },
    checkForm() {
      let params = {
        userphone: this.uphone,
        password: this.upwd,
        username: this.uname,
        email: this.uemail,
        checkCode: this.umsg,
      };
      console.log("params", params);
      var url = `/sys/userDo/regUser`;
      this.axios
        .post(url, params, { "Content-Type": "application/json" })
        .then((res) => {
          console.log("注册业务", res);
          if (res.data.code == 2000) {
            this.$messagebox("提示", "注册成功");
            this.$router.push("/login");
          } else {
            this.$messagebox("提示", "手机号、密码有误或存在，请重新输入");
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.blogin {
  color: #aaa;
  position: absolute;
  right: 6vw;
  top: 6vw;
  font-size: 0.8em;
}
.login-logo {
  position: absolute;
  width: 100%;
  top: 16vw;
  text-align: center;
}
.forms {
  margin: 60vw 10vw 10vw;
}
.van-button--normal {
  width: 80%;
  position: absolute;
  bottom: 10vw;
  border: none;
  background-color: orange;
  border-radius: 50px;
}
</style>
